<template>
    <div class="branch">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="部门名称">
                    <a-input v-model="page.deptName" @keyup.enter="searchFn" placeholder="请输入部门名称" allowClear/>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="searchFn">搜索</a-button>
                </a-form-model-item>
            </a-form-model>
            <a-button type="primary" @click="addTreeFn">添加</a-button>
        </div>
        <div class="exception-content">
            <my-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
                <a-table-column title="序号" align="center" :ellipsis="true"
                                :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1"/>
                <a-table-column title="部门名称" data-index="deptName" align="center" :ellipsis="true"/>
                <a-table-column title="是否启用" data-index="isEnable" align="center">
                    <template slot-scope="isEnable">
                        <a-switch default-checked :checked="isEnable"/>
                    </template>
                </a-table-column>
                <a-table-column title="操作" align="center" width="200px">
                    <template slot-scope="text,record,index">
                        <div class="handle">
                            <a-button type="primary" @click="editFn(record,index)">修改</a-button>
                            <a-button type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </my-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total"
                              :defaultPageSize="page.size" :item-render="itemRender" hideOnSinglePage
                              @change="pagechangeFn"/>
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="50%" :title="title" centered @cancel="()=>form = {}" :maskClosable="false"
                 destroyOnClose>
            <a-form-model ref="formrules" @keyup.enter.native="formSubFn" :rules="formrules" :model="form"
                          :label-col="{ span: 4 }" :wrapper-col="{span:18}" :colon="false">

                    <a-form-model-item label="部门名称" prop="deptName">
                        <a-input v-model="form.deptName"/>
                    </a-form-model-item>
                <a-form-model-item label="是否显示">
                    <a-switch v-model="form.isEnable" />
                </a-form-model-item>
            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="formSubFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "Branch.vue",
        data() {
            return {
                title: "",
                addPop: false, // 弹窗是否显示
                tableData: [], // 表格数据
                page: {
                    // 分页数据查询
                    current: 1,
                    size: 10,
                    deptName: "",
                },
                form: {
                    // 弹窗添加表单数据
                    deptName: "", // 部门名称
                    isEnable:true,
                },
                // 表单验证
                formrules: {
                    deptName: [
                        {
                            required: true,
                            message: "部门名称必填",
                            trigger: "blur",
                        },
                    ]
                },
                total: 0,
            }
        },
        methods: {
            searchFn() {
                // 搜索按钮方法
                this.page.current = 1;
                this.getData();
            },
            addTreeFn() {
                // 添加按钮方法
                this.title = "添加部门";
                this.addPop = true;
            },
            editFn(record) {
                // 修改按钮方法
                this.title = "修改部门信息";
                this.form = JSON.parse(JSON.stringify(record));
                this.addPop = true;
            },
            delFn(id) {
                let _that = this;
                this.$confirm({
                    title: "是否确认删除?",
                    onOk() {
                        _that.$api.DeptRemove(id).then((res) => {
                            console.log(res.data);
                            if (res.data.data == true) {
                                _that.$message.info("删除成功");
                                _that.getData();
                            }else {
                                this.$message.warning(res.data.errorMessage)
                            }
                        });
                    },
                    onCancel() {
                        console.log("Cancel");
                    },
                    class: "delk",
                });
            },
            // 弹窗确定按钮方法
            formSubFn() {
                console.log(this.form);
                this.$refs.formrules.validate((valid) => {
                    if (valid) {
                        if (this.title == "添加企业") {
                            this.postTreeData();
                        } else {
                            this.$api.DeptEdit(this.form).then((res) => {
                                if (res.data.code == 0) {
                                    this.$message.info("修改成功");
                                    this.addPop = false;
                                    this.form = {
                                        deptName: "", // 部门名称
                                        isEnable:true,
                                    };
                                    this.getData();
                                } else {
                                    this.$message.warning(res.data.errorMessage);
                                }
                            });
                        }
                    }
                });
            },
            // 分页方法
            itemRender(current, type, originalElement) {
                if (type === "prev") {
                    return <a > 上一页 < /a>;
                } else if (type === "next") {
                    return <a > 下一页 < /a>;
                }
                return originalElement;
            },
            pagechangeFn(page, pageSize) {
                this.page.current = page;
                this.getData();
            },
            // 添加方法
            postTreeData() {
                this.$api.DeptSave(this.form).then((res) => {
                    if (res.data.code == 0) {
                        this.addPop = false;
                        this.form = {
                            deptName: "", // 部门名称
                            isEnable:true,
                        };
                        this.getData();
                    }else {
                        this.$message.warning(res.data.errorMessage)
                    }
                });
            },
            getData() {
                this.$api.DeptFindByPage(this.page).then((res) => {
                    if (res.data.code == 0) {
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                        if (res.data.data.length == 0 && this.page.current > 1) {
                            this.page.current -= 1;
                            this.getData();
                        }
                    }
                });
            },
        },
        mounted() {
            this.getData();
        }
    }
</script>

<style lang="scss" scoped>
    .branch {
        width: 100%;
        height: 100%;
        padding: 1%;
        box-sizing: border-box;

        .exception-top {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .exception-content {
            width: 100%;
            height: calc(94% - 60px);

            .handle {
                display: flex;
                justify-content: space-around;
            }
        }

        .page-box {
            float: right;
            // 分页
            ::v-deep .ant-pagination-total-text {
                color: rgba(255, 255, 255, 0.7);
            }
        }
    }
</style>
